<template>
  <div id="keepTrend">
    <h3 class="echarts-title">
      新增留存率趋势
      <popover :descriptionData="keepData" :propWidth="500"></popover>
    </h3>
    <!--上部搜索条件组件-->
    <topSearch
      :form-inline="formInline"
      @toSearch="toSearch"
      @setRateTypeList="setRateTypeList"
    ></topSearch>
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:keepAnalysis:exportTrend'"
        type="warning"
        icon="el-icon-download"
        @click="exportRoles"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- <h3 class="echarts-title">用户来源占比统计</h3>-->
    <div id="trend" class="box"></div>
  </div>
</template>

<script>
import {
  getChartsList,
  exportCharts
} from '@/api/dataStatistics/keepAnalysis/index.js' // 接口
import topSearch from '@component/dataStatistics/keepAnalysis/topSearch' // 上部搜索条件
import popover from '@component/dataStatistics/common/popover' // 注释说明
import { getInterval } from '@utils/pubFunction'
export default {
  name: 'keepTrend',
  msg: '新增留存率趋势',
  props: ['powerAry'],
  components: {
    topSearch,
    popover
    /*,
    dialogAddEdit*/
  },
  data() {
    return {
      type: '次日留存',
      option: {
        legend: {
          data: ['全部用户', '正式', '定金', '试学', '无身份'],
          selected: {
            正式: false,
            定金: false,
            试学: false,
            无身份: false
          },
          left: 40
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisTick: {
            length: 5
          },
          splitLine: {
            show: false
          },
          boundaryGap: false
        },
        yAxis: {
          type: 'value'
        },
        series: [
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} },
          { type: 'line', areaStyle: {} }
        ]
      },
      optionLine: {
        data: [
          '2020-12-1',
          '2020-12-2',
          '2020-12-3',
          '2020-12-4',
          '2020-12-5',
          '2020-12-6',
          '2020-12-7',
          '2020-12-8',
          '2020-12-9',
          '2020-12-10'
          /*'2020-12-11',
            '2020-12-12',
            '2020-12-13',
            '2020-12-14',
            '2020-12-15',
            '2020-12-16',
            '2020-12-17',
            '2020-12-18',
            '2020-12-19',
            '2020-12-20',
            '2020-12-21',
            '2020-12-22',
            '2020-12-23',
            '2020-12-24',
            '2020-12-25',
            '2020-12-26',
            '2020-12-27',
            '2020-12-28',
            '2020-12-29',
            '2020-12-30',
            '2020-12-31',
            '2021-01-01',
            '2021-01-02',
            '2021-01-03',
            '2021-01-04',
            '2021-01-05',
            '2021-01-06',
            '2021-01-07',
            '2021-01-08',
            '2021-01-09',
            '2021-01-10',
            '2021-01-11',
            '2021-01-12',
            '2021-01-13',
            '2021-01-14',
            '2021-01-15',
            '2021-01-16',
            '2021-01-17',
            '2021-01-18',
            '2021-01-19',
            '2021-01-20',*/
        ],
        series: [
          {
            name: '全部用户',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '正式',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '定金',
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '试学',
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '无身份',
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      trend: null,
      formInline: {
        rateType: '', //留存
        source: '', //来源
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        createTime: []
      },
      rateTypeList: []
    }
  },
  computed: {
    keepData() {
      return this.$store.state.descriptionData.keepData
    }
  },
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      this.trend = this.echarts.init(document.getElementById('trend'))
      let _this = this
      $(window).resize(function() {
        //这里写内容
        _this.trend.resize()
      })
      this.trend.setOption(this.option)
    },
    /*设置tooltip、title*/
    setTitle() {
      let _this = this
      this.trend.setOption({
        /* tooltip: {
          formatter: '{b}<br/>' + _this.type + '率: {c}%'
        }*/
        tooltip: {
          formatter(params) {
            let str = params[0].name + '<br/>'
            for (var i = 0; i < params.length; i++) {
              str +=
                params[i].seriesName +
                _this.type +
                '率：' +
                params[i].data +
                '%<br/>'
            }
            return str
          }
        }
      })
    },
    /*设置rateTypeList*/
    setRateTypeList(list) {
      this.rateTypeList = [...list]
      this.setTitle()
    },
    setType() {
      this.rateTypeList.forEach((item) => {
        if (item.dictValue === this.formInline.rateType) {
          this.type = item.dictLabel === 1 ? '次' : item.dictLabel
        }
      })
    },
    /* 获取列表 */
    searchList() {
      this.setType()
      let obj = Object.assign({}, this.searchParams, this.formInline)
      this.trend.showLoading()
      delete obj.createTime
      getChartsList(
        obj,
        (response) => {
          /*计算x轴间隔*/
          let data = response.data
          let series = response.series
          let dataLength = data.length
          let interval = 0
          if (dataLength > 10) {
            interval = getInterval(dataLength, 10)
          }
          let opt = {
            xAxis: {
              data: data,
              axisLabel: {
                interval: interval
              }
            },
            series: series
          }
          this.trend.setOption(opt)
          this.trend.hideLoading()
        },
        (response) => {
          this.trend.hideLoading()
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 导出 */
    exportRoles() {
      this.$confirm('确定导出当前数据吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = exportCharts()
        let params = Object.assign({}, this.formInline)
        delete params.createTime
        delete params.rateType
        this.downFile('get', url, params, '留存分析')
      })
    },
    /* 搜索 */
    toSearch() {
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#keepTrend {
  .box {
    width: 100%;
    height: 400px;
  }
}
</style>
